/**
 * 手风琴组件
 */
export class AccordionMenu extends React.Component{
    state={
        currpath:"/",
        defaultinit:false,
        parentId:{},
        currExpId:0,
    }
    /**
     * 子菜单点击的事件
     * @param e
     * @param m
     */
    itemClick=(e,m)=>{
        if(this.props.itemClick){
            this.props.itemClick(e,m);
        }
    }

    /**
     * 初始化根据路径选中
     * @param path
     */
    active=(path)=>{
        //this.state.currpath=path;
        console.log("激活",path)


        this.setState({currpath:path});

        // for(let l in this.state.item){
        //     this.state.item[l].default();
        // }
        // this.state.item[path].active()
    }

    componentDidMount(){

        this.state.defaultinit=true;
    }

    parseTreeData=()=>{
        let parent=0;
        this.props.dataSource.map((item)=>{
            // if(item.parent===0){
            //     item.exp=false;
            //     item.cl=false;
            // }else{
            //     item.exp=true;
            // }

            if(item.path===this.props.currPath){
                this.state.currExpId=item.parent;
            }

            //let key=this.state.parentId["p_"+item.parent];
            if(!this.state.parentId["p_"+item.parent]){
                this.state.parentId["p_"+item.parent]=[]
            }
            this.state.parentId["p_"+item.parent].push(item);

        })
        // console.log("默认路径为",this.props.currPath);
        this.state.parentId["p_0"].map((m)=>{
            if(m.id===this.state.currExpId){
                m.defaultexp=true
                console.log("设置",m.name,"未展开")
            }
        })
    }

    load=(e)=>{
      this.setState({load:true});
    }

    render(){
        this.state.item={};
        if(!this.state.defaultinit){
            this.parseTreeData();
            this.state.currpath=this.props.currPath;
            //console.log("菜单数据结构",this.state.parentId)
        }
        return (
            <div className="accordion-menu">
                {
                    this.state.parentId["p_0"].map((m)=>{


                       // let item=(<a href={"#"+m.path}  onClick={(e)=>{this.itemClick(e,m)}}>{m.name}</a>);
                        let item=<AccordionItem currPath={this.state.currpath} {...m} load={this.load} parentNode={this.state.parentId} itemClick={this.itemClick}/>
                        //this.state.item[m.path]=item;
                        return item;
                    })
                }
            </div>
        )
    }
}


/**
 * 字节点容器
 */
class AccordionItem extends React.Component{

    state={
        exp:false
    }

    arrowDown=(e)=>{
        //this.props.exp=false;

        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();

        if(this.props.parent!==0){
            this.props.itemClick(this.props);
            return;
        }
        if(!this.props.parentNode.selected){
            this.props.parentNode.selected=this.props.parentNode["p_"+this.props.id];
        }else{
            if(this.props.parentNode.selected!=this.props.parentNode["p_"+this.props.id])
            {
                this.props.parentNode.selected.map((item)=>{
                    item.exp=false;
                });
                this.props.parentNode.selected=this.props.parentNode["p_"+this.props.id];
            }

        }
        if(this.props.parentNode["p_"+this.props.id])
        {
            this.props.parentNode["p_"+this.props.id].map((item)=>{
                item.exp=!item.exp;
                if(this.props.defaultexp){
                    item.exp=false;
                }
                this.state.exp=item.exp;

                // this.props.exp=item.exp;
            });
        }
        this.props.parentNode["p_"+0].map((item)=>{
            item.cl=false;
            item.defaultexp=false
            if(item.id===this.props.id){
                item.cl=!item.cl;
            }
        })

        this.props.load();


    }
    render(){
        let pstyle={display:"none"};

        //this.state.exp=this.props.exp;

        let arrow="fa-chevron-down"
        if(this.props.cl&&this.state.exp||this.props.defaultexp){
            arrow="fa-chevron-up"
            pstyle={display:"block"}

        }else{
            pstyle={display:"none"};
        }

        // if(this.props.defaultexp){
        //     pstyle={display:"block"}
        //     console.log("展开",this.props.name)
        // }

        let path=this.props.path;
        let selected="";
        if(path===this.props.currPath){
            //console.log("选中")

            selected="selected"
        }
        console.log("当前默认路径",this.props.currPath,path)

        return (
            <div>
            <span onMouseDown={this.arrowDown} className={selected}>
                <i class={this.props.ico?this.props.ico:""}></i>
                <a href="javascript:void(0)" ref="item" >{this.props.name}</a>
                <b  class={"fas "+arrow} ></b>
            </span>
            <p style={pstyle}>
            {
                this.props.parentNode["p_"+this.props.id]!==undefined?
                        this.props.parentNode["p_"+this.props.id].map(
                                (m)=>{
                                return <AccordionItem {...m} currPath={this.props.currPath} parentNode={this.props.parentNode} load={this.props.load} itemClick={(e) => {
                                this.props.itemClick(e, m)
                            }}/>
                            }
                        )
                :""
            }
            </p>
        </div>
        )
    }
}